<template>
  <div class="tab-wrapper">
    <!-- <app-header></app-header> -->
    <div class="tab-main">
      <div id="content"  class="content">
        <p class="desc">
          华通押好贷
          <span class="line">|</span>
          最高可贷1000万
          <span class="line">|</span>
          期限长&ensp;审批快
        </p>
        <div class="qrcode-wrapper">
          <div class="qrcode" ref="qrcode">
            <QRCanvas
              class="qrcanvas"
              :options="options"
              @updated="onUpdated"
              v-show="false"
            />
            <img :src="base64Img" width="100%" height="100%" />
          </div>
          <span>扫描二维码在线申请</span>
        </div>
        <div class="invite_city1" style="height:1.3rem;position:absolute;right:0;left:0;bottom:0">
          <!-- <img src="~@/assets/images/invite/invite_city1.png" style="vertical-align: bottom;" width="100%" height="100%" alt=""> -->
        </div>
        
      </div>
      <div class="way" >
          <div class="explain">
            <p class="title">分享方式:</p>
            <p>
              1.点击 &thinsp;
              <a class="save" @click="captureDom()"
                >保存图片至本地</a
              >&thinsp; 再发送图片至朋友圈或好友.
            </p>
            <p>2.点击微信右上角“…”选择分享给好友或朋友圈.</p>
            <p>
              <!-- 3.好友进行申请时，填写你的推荐码：<span class="code">{{recommendCode}}</span> -->
            </p>
          </div>
        </div>
    </div>
    <div v-show="sw" id="canvasImg" ref="canvasArea">
        <span @click="closeCanvas"></span>
        
    </div>
  </div>
</template>

<script>
import { QRCanvas } from "qrcanvas-vue";
import html2canvas from 'html2canvas';
import { Indicator } from 'mint-ui';
import {APIENV} from "@/utils/constant"
import weChatConfig from "@/utils/weChat"

export default {
  name: "tab3",
  components: {
    QRCanvas
  },
  data() {
    return {
      sw:false,
      recommendCode:"",
      options: {},
      base64Img: "",
      baseUrl:""
    };
  },
  created() {
    this.baseUrl = APIENV[process.env.VUE_APP_APIENV]
  },
  mounted() {
    this.recommendCode = this.$store.getters["user/recommendCode"]
    let url = this.baseUrl +"/YhdOpention/QrcoderecommenCol.htm?referrer="+ this.recommendCode
    weChatConfig()
    const image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = require("@/assets/images/common/bank-logo.png");
    image.setAttribute("style","width:25px;height:25px")
    image.onload = () => {
      this.options = {
        data:url , //FIXME:
        size: this.$refs.qrcode.getBoundingClientRect().width,
        logo: { image,w:35,h:35,x:65,y:60 }
      };
    };
  },
  methods: {
    onUpdated(canvas) {
      if (this.options.logo) {
        const canvas_w = canvas.width,
          canvas_h = canvas.height,
          ctx = canvas.getContext("2d"),
          canvas_data = ctx.getImageData(0, 0, canvas_w, canvas_h);
        ctx.clearRect(0, 0, canvas_w, canvas_h);
        const offset = 20;
        canvas.width = canvas_w + offset;
        canvas.height = canvas_h + offset;
        canvas.style.borderRadius = "5px"; //TODO:
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(canvas_data, offset / 2, offset / 2);

        this.base64Img = canvas.toDataURL("image/jpeg");
      }
    },
    captureDom() {
      let self = this;
      Indicator.open()
      html2canvas(document.getElementById('content')).then(function(canvas) {
          let image = new Image()
          image.src = canvas.toDataURL("image/png")
          image.classList.add("toCanvas")
          document.getElementById("canvasImg").appendChild(image);
          self.sw = !self.sw;
          Indicator.close();

      });
    },
    closeCanvas() {
      this.sw = !this.sw
      this.$refs.canvasArea.removeChild(this.$refs.canvasArea.children[1])
    }
  }
};
</script>

<style scoped lang="scss">
@import "index.scss";

</style>
